<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Fly-Ins</title>

    <style type="text/css">
        div {
            padding: 0 5px;
        }

        #nav {
            background-color: #ccc;
            width: 100px;
            cursor: pointer;
        }

        #div1 {
            background-color: #00f;
            color: #fff;
            font-size: larger;
            position: absolute;
            width: 400px;
            height: 200px;
            left: -410px;
            top: -400px;
        }

        #div2 {
            background-color: #ff0;
            color: #fff;
            font-size: larger;
            position: relative;
            width: 400px;
            height: 200px;
            left: -410px;
            top: -400px;
            z-index: 4;
        }

        #div3 {
            background-color: #f00;
            color: #fff;
            font-size: larger;
            position: fixed;
            width: 400px;
            height: 200px;
            left: -410px;
            top: -400px;
        }
        
    </style>

    <script type="text/javascript">
    //<![CDATA[
        var slides = ["div1", "div2", "div3"];
        var x = 0;
        var y = 0;
        var currentSlide = 0;

        window.onload = function() {
            document.getElementById("nav").onclick = nextSlide;
        }

        function nextSlide() {
            setTimeout("moveBlock()", 1000);
        }

        function moveBlock() {
            x += 20;
            y += 20;
            var obj = document.getElementById(slides[currentSlide]);
            obj.style.top = x + "px";
            obj.style.left = y + "px";
            if(x<(100+currentSlide*60)) {
                setTimeout("moveBlock()", 100);
            }
            else {
                currentSlide++;
                x = 0; y = 0;
            }

            if(currentSlide >= slides.length) {
                document.getElementById("nav").onclick = null;
            }
        }

    //]]>

    </script>
    
</head>
<body>
    <div id="nav">
        <p>Next slide</p>
    </div>

    <div id="div1">
        <p>Blue block that is absolutely positioned</p>
    </div>

    <div id="div2">
        <p>Yellow block that is releatively positioned, and given a z-index of 4</p>
    </div>

    <div id="div3">
        <p>Red block that has fixed positioning.</p>
    </div>

</body>
</html>
